<template>
  <a-select
    v-model="currentValue"
    v-bind="$attrs"
    v-on="$listeners"
    allow-clear
    show-search
    option-filter-prop="children"
    :filter-option="filterOption"
    placeholder="请选择"
  >
    <a-icon v-if="loading" slot="suffixIcon" style="color: #096dd9" type="loading" />
    <a-spin v-if="loading" slot="notFoundContent" size="small" />
    <a-select-option v-for="i in localList" :key="i[keys[0]]" :value="i[keys[0]]" :disabled="i.disabled">
      {{ i[keys[1]] }}
    </a-select-option>
  </a-select>
</template>
<script>
export default {
  name: 'BSelect',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: [Array, String, Object, Number]
    },
    list: {
      type: Array,
      default() {
        return []
      }
    },
    keys: {
      type: Array,
      default: function() {
        return ['id', 'name']
      }
    },
    request: {
      type: [Object, Function],
      default: function() {
        return null
      }
    },
    // 需要联动的表单名，
    form: {
      type: Object,
      default: () => ({})
    },
    // 需要联动的表单名
    keyValue: {
      type: String,
      default: () => 'orgId'
    },
    init: {
      type: Boolean,
      default: true
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    isSearch: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    // 转换绑定的选中数据，与v-model同步
    currentValue: {
      get: function() {
        return this.value
      },
      set: function(value) {
        // this.$emit('input', value)
        // if (this.watchKey)
        this.$emit('change', value)
        this.$emit('change2', value)//外部监听change事件，会触发两次
        let res = this.localList.find(v => v[this.keys[0]] === value)
        if (res) {
          this.$emit('selectChange', res)
        }
      }
    },
    watchKey() {
      return this.form[this.keyValue]
    }
  },
  data() {
    return {
      loading: false,
      localList: this.list,
      isCanClear: null // 是否清除
    }
  },
  mounted() {
    this.init && this.getData()
  },
  methods: {
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    async getData() {
      if (this.request) {
        this.loading = true
        let res = await this.request(this.watchKey)
        // console.log('bselect',res)
        this.loading = false
        console.log(res)
        if (res?.code === this.SUCCESS_CODE) {
          this.localList = res.data
        }
      }
    }
  },
  watch: {
    isEdit: {
      handler(val) {
        this.isCanClear = !val
      },
      immediate: true
    },
    watchKey(val) {
      this.localList = []
      if (this.isSearch) {
        this.currentValue = void 0
      }
      // 清空表单
      if (this.isEdit && this.isCanClear) {
        this.currentValue = void 0
      } else {
        this.isCanClear = true
      }
      val && this.getData()
    },
    list() {
      this.localList = this.list
    }
  }
}
</script>
